<template>
	<view class="com">

		<!-- 修改后的进度条 -->
		<!-- <view class="progress-bar" v-if="isAutoPlaying && animationIndex >= 0">
			动画{{ currentAnimationType }}:
			{{ Math.min(animationIndex + 1, animationList.length) }}/{{ animationList.length }}
		</view> -->

		<!-- 新增：倒计时 -->
		<view class="countdown" v-if="showCountdown">
			<view class="countdown-text">抽奖准备开始!</view>
			<view class="countdown-number">{{ countdownNumber }}</view>
		</view>

		<!-- 增强版整体边缘光效 -->
		<view class="edge-glow"></view>
		<view class="edge-light"></view>

		<!-- 增强版背景光效 -->
		<view class="bg-glow"></view>
		<view class="bg-light"></view>

		<!-- 背景粒子效果 -->
		<view class="particles">
			<view class="particle" v-for="i in 20" :key="i"></view>
		</view>

		<view class="bg">
			<!-- 四角装饰元素 -->
			<view class="corner-decor top-left"></view>
			<view class="corner-decor top-right"></view>
			<view class="corner-decor bottom-left"></view>
			<view class="corner-decor bottom-right"></view>

			<view class="box">
				<!-- 顶部奖品区域 -->
				<view class="top">
					<view
						:class="['item', {active:animationList[animationIndex]?.current === item.current, 'pulse':animationList[animationIndex]?.current === item.current}]"
						:style="`background: ${item.bgColor}`" v-for="(item, index) in topList" :key="index">
						<!-- 选中光效 -->
						<view class="item-glow" v-if="item.listIndex === animationList[animationIndex]?.current"></view>
						<view class="image">
							<image :src="item.img" :alt="item.img" class="img" mode="aspectFill">
							</image>
						</view>
						<view class="title" :style="`color: ${item.color};`">
							<view class="show-text">{{ item.title }}</view>
						</view>
					</view>
				</view>

				<!-- 右侧奖品区域 -->
				<view class="right">
					<view
						:class="['item', {active:animationList[animationIndex]?.current === item.current, 'pulse':animationList[animationIndex]?.current === item.current}]"
						:style="`background: ${item.bgColor}`" v-for="(item, index) in rightList" :key="index">
						<view class="item-glow" v-if="item.listIndex === animationList[animationIndex]?.current"></view>
						<view class="image">
							<image :src="item.img" :alt="item.img" class="img" mode="aspectFill">
							</image>
						</view>
						<view class="title" :style="`color: ${item.color};`">
							<view class="show-text">{{ item.title }}</view>
						</view>
					</view>
				</view>

				<!-- 底部奖品区域 -->
				<view class="bottom">
					<view
						:class="['item', {active:animationList[animationIndex]?.current === item.current, 'pulse':animationList[animationIndex]?.current === item.current}]"
						:style="`background: ${item.bgColor}`" v-for="(item, index) in bottomList" :key="index">
						<view class="item-glow" v-if="item.listIndex === animationList[animationIndex]?.current"></view>
						<view class="image">
							<image :src="item.img" :alt="item.img" class="img" mode="aspectFill">
							</image>
						</view>
						<view class="title" :style="`color: ${item.color};`">
							<view class="show-text">{{ item.title }}</view>
						</view>
					</view>
				</view>

				<!-- 左侧奖品区域 -->
				<view class="left">
					<view
						:class="['item', {active:animationList[animationIndex]?.current === item.current, 'pulse':animationList[animationIndex]?.current === item.current}]"
						:style="`background: ${item.bgColor}`" v-for="(item, index) in leftList" :key="index">
						<view class="item-glow" v-if="item.listIndex === animationList[animationIndex]?.current"></view>
						<view class="image">
							<image :src="item.img" :alt="item.img" class="img" mode="aspectFill">
							</image>
						</view>
						<view class="title" :style="`color: ${item.color};`">
							<view class="show-text">{{ item.title }}</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 中奖展示区域 -->
			<view class="ok" v-if="okShow">
				<!-- 金色粒子背景 -->
				<view class="gold-particles">
					<view class="gold-particle" v-for="i in 50" :key="i"></view>
				</view>
				<!-- 彩纸效果增强 -->
				<view class="confetti" v-for="i in 30" :key="i"></view>

				<!-- 光晕效果 -->
				<view class="halo"></view>
				<view class="bg-image">
					<image src="@/assets/ok.png" alt="@/assets/ok.png" class="img" mode="widthFix"></image>
				</view>
				<view v-if="okObj" class="content" :style="`background: ${okObj.bgColor}`">
					<!-- 多重光效 -->
					<view class="prize-glow"></view>
					<view class="prize-light"></view>
					<view class="prize-sparkle"></view>
					<view class="image">
						<image :src="okObj.img" :alt="okObj.img" class="img" mode="aspectFill">
						</image>
					</view>
					<view class="title" :style="`color: ${okObj.color};`">
						<view class="show-text">
							{{ okObj.title }}
						</view>
					</view>

					<!-- 获奖标签 -->
					<view class="winner-badge">WINNER!</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		onMounted,
		onUnmounted,
		ref
	} from 'vue';
	import {
		getPrize,
	} from '@/api/prize.js';
	import {
		getConfig,
		updateConfig
	} from '@/api/config.js';
	import indexMp3 from '@/assets/index.mp3'
	import okMp3 from '@/assets/ok.mp3'

	/**
	 * 结算是否显示
	 * 结算页的奖品
	 */
	const okShow = ref(false)
	const okObj = ref()

	/**
	 * 隐藏的音频元素
	 */
	const audioPlayer = ref()
	const okAudioPlayer = ref()

	/**
	 * 目标位置
	 */
	let targetCurrent = -1
	const animationIndex = ref(-1)
	const animationList = ref([])

	// 新增状态
	const showCountdown = ref(false)
	const countdownNumber = ref(3)
	const isAutoPlaying = ref(false)
	const currentAnimationType = ref(1) // 1,2,3 对应三种动画
	let autoTimeout = 0

	// 定义卡片数据
	const list = ref([]);

	const topList = computed(() => {
		return list.value.map((item, index) => {
			item.listIndex = index
			return item
		}).filter((_, i) => {
			if (i >= 0 && i < 7) {
				return true
			}
		})
	})

	const rightList = computed(() => {
		return list.value.map((item, index) => {
			item.listIndex = index
			return item
		}).filter((_, i) => {
			if (i >= 7 && i < 11) {
				return true
			}
		})
	})

	const bottomList = computed(() => {
		return list.value.map((item, index) => {
			item.listIndex = index
			return item
		}).filter((_, i) => {
			if (i >= 11 && i < 18) {
				return true
			}
		})
	})

	const leftList = computed(() => {
		return list.value.map((item, index) => {
			item.listIndex = index
			return item
		}).filter((_, i) => {
			if (i >= 18 && i < 22) {
				return true
			}
		})
	})

	/**
	 * 过度动画加载开始事件
	 */
	const handleTransitionstart = () => {
		// console.log('handleTransitionstart')
	}

	/**
	 * 过度动画加载完成事件
	 */
	const handleTransitionend = () => {
		// console.log('handleTransitionend', animationIndex.value)
		if (showCountdown.value) {
			animationIndex.value = -1
			animationList.value = []
			return
		}
		if (animationIndex.value < animationList.value.length - 1) {
			animationIndex.value = animationIndex.value + 1
			handlePlayIndexAudio()
		} else if (animationIndex.value === animationList.value.length - 1) {
			if (isAutoPlaying.value) {
				/**
				 *3s后开始自动播放
				 */
				animationList.value = -1
				isAutoPlaying.value = true
				autoTimeout = setTimeout(startAutoPlay, 3000)
			} else {
				handleSettlement()
			}
		}
	}

	/**
	 * 结算
	 */
	const handleSettlement = () => {
		okShow.value = true
		// console.log(targetCurrent);
		okObj.value = list.value[targetCurrent]
		animationIndex.value = -1
		animationList.value = []
		// targetCurrent = -1
		// 循环切换动画类型
		currentAnimationType.value = currentAnimationType.value % 3 + 1
		handlePlayOkAudio()
	}


	/**
	 * 播放音频的函数
	 */
	const handlePlayIndexAudio = () => {
		if (audioPlayer.value) {
			// audioPlayer.value.playbackRate = 1.5 // 调速
			audioPlayer.value.currentTime = 0 // 重置播放位置
			audioPlayer.value.play()
		}
	}

	const handlePlayOkAudio = () => {
		if (okAudioPlayer.value) {
			okAudioPlayer.value.currentTime = 0 // 重置播放位置
			okAudioPlayer.value.play()
		}
	}

	/**
	 * 全局事件监听按键按下
	 */
	const handleKeyDown = (e) => {
		if (!isAutoPlaying.value && animationIndex.value !== -1 || showCountdown.value) {
			console.log('正在抽奖');
			return
		}
		if (e.key === 'Enter') {
			// 执行你的逻辑
			if (okShow.value) {
				console.log('关闭结算');
				okShow.value = false
				okObj.value = undefined

				/**
				 * 关闭结算3s后开始自动播放
				 */
				isAutoPlaying.value = true
				autoTimeout = setTimeout(startAutoPlay, 3000)
			} else {
				console.log('开始倒计时');
				/**
				 * 如果正在自动播放或准备自动播放则先取消
				 */
				if (isAutoPlaying.value || animationIndex.value !== -1) {
					autoTimeout && clearTimeout(autoTimeout)
					isAutoPlaying.value = false
					animationIndex.value = -1
				}
				// 按下回车开始倒计时
				startCountdown()
			}
		}
	};

	/**
	 * 自动播放动画
	 */
	const startAutoPlay = () => {
		targetCurrent = Math.floor(Math.random() * list.value.length);

		if (currentAnimationType.value === 1) {
			generateAnimationList1()
		} else if (currentAnimationType.value === 2) {
			generateAnimationList2()
		} else {
			generateAnimationList3()
		}

		animationIndex.value = 0
		handlePlayIndexAudio()

		// 循环切换动画类型
		currentAnimationType.value = currentAnimationType.value % 3 + 1
	}

	/**
	 * 开始倒计时
	 */
	const startCountdown = async () => {
		if (showCountdown.value || animationIndex.value >= 0) return

		showCountdown.value = true
		countdownNumber.value = 3

		const timer = setInterval(() => {
			countdownNumber.value--
			if (countdownNumber.value <= 0) {
				clearInterval(timer)
				showCountdown.value = false
				isAutoPlaying.value = false
				handleStart() // 开始抽奖
			}
		}, 1000)
	}

	/**
	 * 触发开始抽奖
	 */
	const handleStart = async () => {

		// 检查是否有配置的targetCurrent
		const config = await getConfig();
		const targetConfig = config.find(o => o.label === 'targetCurrent');

		if (targetConfig && Number(targetConfig.value) !== -1 && targetConfig.value !== undefined && targetConfig
			.value !== null) {
			targetCurrent = parseInt(targetConfig.value);
			// 使用后重置配置
			await updateConfig(targetConfig._id, {
				value: -1
			});
		} else {
			// 没有配置则根据权重计算
			targetCurrent = calculateWinnerByWeight();
		}

		if (currentAnimationType.value === 1) {
			generateAnimationList1()
		} else if (currentAnimationType.value === 2) {
			generateAnimationList2()
		} else if (currentAnimationType.value === 3) {
			generateAnimationList3()
		}
		// console.log(animationList.value, animationList.value[animationList.value.length - 1].current,
		// 	targetCurrent)

		// 执行动画
		animationIndex.value = 0
		handlePlayIndexAudio()
	}

	// 新增方法：根据权重计算中奖者
	const calculateWinnerByWeight = () => {
		// 计算总权重
		const totalWeight = list.value.reduce((sum, item) => sum + (item.weight || 1), 0);
		
		// 生成一个0到总权重之间的随机数
		const randomNum = Math.random() * totalWeight;

		// 遍历奖品列表，根据权重确定中奖项
		let weightSum = 0;
		for (let i = 0; i < list.value.length; i++) {
			weightSum += list.value[i].weight || 1;
			if (randomNum <= weightSum) {
				console.log(i);
				return i;
			}
		}

		// 如果未找到（理论上不会发生），返回最后一个
		return list.value.length - 1;
	};

	/**
	 * 随机生成无序动画列表
	 */
	const generateAnimationList2 = () => {
		// 随机生成动画列表长度
		const minLen = Math.ceil(list.value.length * 3.5)
		const maxLen = minLen + list.value.length
		const randomLength = Math.floor(Math.random() * (maxLen - minLen + 1)) + minLen;

		const animList = [];

		// 生成动画列表
		for (let i = 0; i < randomLength; i++) {
			let prevCurrent = -1
			if (i > 0) {
				prevCurrent = animList[i - 1]
			}
			let randomIndex = Math.floor(Math.random() * list.value.length)
			while (prevCurrent === randomIndex) {
				randomIndex = Math.floor(Math.random() * list.value.length)
			}
			animList.push({
				current: randomIndex,
			});
		}

		animList.push({
			current: targetCurrent,
		})

		animationList.value = [...animList]
	}

	/**
	 * 随机生成有序动画列表
	 */
	const generateAnimationList1 = () => {
		// 随机生成动画列表长度
		const minLen = Math.ceil(list.value.length * 3.5)
		const maxLen = minLen + list.value.length
		const randomLength = Math.floor(Math.random() * (maxLen - minLen + 1)) + minLen;
		const randomTarget = randomLength % list.value.length
		let diff = 0

		if (randomTarget > targetCurrent) {
			diff = list.value.length - randomLength + targetCurrent
		} else if (targetCurrent > randomTarget) {
			diff = targetCurrent - randomTarget
		}

		const animList = [];

		// 生成动画列表
		for (let i = 0; i < randomLength + diff; i++) {
			let current = i % list.value.length
			animList.push({
				current,
			});
		}

		animList.push({
			current: targetCurrent,
		})

		animationList.value = [...animList]
	}

	/**
	 * 随机生成有序(支持正反向)动画列表
	 */
	const generateAnimationList3 = () => {
		// 列表最小长度
		const minLen = Math.ceil(list.value.length * 3.5)
		const dList = []

		while (dList.reduce((acc, o) => o + acc, 0) < minLen) {
			// 每个周期最大长度
			const cMinLen = Math.ceil(list.value.length * 0.75)
			const cMaxLen = Math.ceil(list.value.length * 1.25)
			const randomLen = Math.floor(Math.random() * (cMaxLen - cMinLen + 1)) + cMinLen;
			dList.push(randomLen)
		}

		const animList = [];

		// 生成动画列表
		for (let i = 0; i < dList.length; i++) {
			for (let j = 0; j < dList[i]; j++) {
				let prevCurrent = -1
				if (animList.length > 0) {
					prevCurrent = animList[animList.length - 1].current
				}
				// 奇数是正 偶数是反
				if ((i + 1) % 2 === 0) {
					let current = (prevCurrent - 1) % list.value.length
					current = current < 0 ? current + list.value.length : current
					animList.push({
						current,
					});
				} else {
					animList.push({
						current: (prevCurrent + 1) % list.value.length,
					});
				}
			}
		}

		// 使其到达目标位置
		const lastCurrent = animList[animList.length - 1].current
		let diff = 0
		if (dList.length % 2 === 0) {
			// 升序
			if (lastCurrent > targetCurrent) {
				diff = list.value.length - lastCurrent + targetCurrent
			} else if (targetCurrent > lastCurrent) {
				diff = targetCurrent - lastCurrent
			}
		} else {
			// 降序
			if (lastCurrent > targetCurrent) {
				diff = lastCurrent - targetCurrent
			} else if (targetCurrent > lastCurrent) {
				diff = lastCurrent + list.value.length - targetCurrent
			}
		}

		for (let i = 0; i < diff; i++) {
			const prevCurrent = animList[animList.length - 1].current
			if (dList.length % 2 === 0) {
				animList.push({
					current: (prevCurrent + 1) % list.value.length,
				});
			} else {
				let current = (prevCurrent - 1) % list.value.length
				current = current < 0 ? current + list.value.length : current
				animList.push({
					current,
				});
			}
		}

		animationList.value = [...animList]

	}

	onMounted(async () => {
		const audioPlayerContext = uni.createInnerAudioContext();
		audioPlayerContext.src = indexMp3;
		audioPlayerContext.onEnded(handleTransitionend)
		audioPlayerContext.onPlay(handleTransitionstart);
		audioPlayerContext.onError((res) => {
			uni.showToast({
				title: "indexMp3音频获取失败",
				icon: "error"
			})
		});
		audioPlayer.value = audioPlayerContext

		const okAudioPlayerContext = uni.createInnerAudioContext();
		okAudioPlayerContext.src = okMp3;
		okAudioPlayerContext.onError((res) => {
			uni.showToast({
				title: "okMp3音频获取失败",
				icon: "error"
			})
		});
		okAudioPlayer.value = okAudioPlayerContext

		window.addEventListener('keydown', handleKeyDown);

		// 请求数据
		let res = []
		try {
			res = await getPrize();
			res = res.slice(0, 22).map(item => ({
				...item,
				// 确保每个item都有必要的字段
				img: item.img || '',
				title: item.title || '这是一个标题',
				bgColor: item.bgColor || '#ff6000',
				color: item.color || '#fff',
				weight: item.weight || 1,
				_id: item._id || null // 用于区分新增和更新
			}));
		} catch (error) {
			uni.showToast({
				title: error.message || '加载失败',
				icon: 'none'
			});
		}
		list.value = res.map((item, index) => {
			item.current = index
			return item
		})


		// 5秒后如果还没有交互，则静音自动播放
		// autoTimeout = setTimeout(() => {
		// 	if (animationIndex.value === -1) {
		// 		audioPlayer.value.volume = 0
		// 		okAudioPlayer.value.volume = 0
		// 		startAutoPlay()
		// 	}
		// }, 3000)
	})

	onUnmounted(() => {
		window.removeEventListener('keydown', handleKeyDown);
	});
</script>

<style lang="scss" scoped>
	// Define variables for item dimensions and spacing
	$item-width: 300rpx;
	$item-height: 300rpx;
	$item-spacing: 30rpx;

	.com {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		width: calc(100vw - 1200rpx);
		z-index: 10;
		margin: auto;

		// 新增进度条样式
		.progress-bar {
			position: absolute;
			top: 20px;
			right: 20px;
			background: rgba(0, 0, 0, 0.7);
			color: white;
			padding: 10px 20px;
			border-radius: 20px;
			z-index: 100;
			font-size: 16px;
			font-weight: bold;
			box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
			display: flex;
			align-items: center;

			&::before {
				content: "进度:";
				margin-right: 5px;
			}
		}

		// 新增倒计时样式
		.countdown {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.7);
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			z-index: 1000;

			.countdown-text {
				font-size: 100px;
				color: #ff0000;
				font-weight: bold;
				text-shadow: 0 0 20px #fff, 0 0 30px #ff0000;
				animation: pulseCountdown 1s infinite;
			}

			.countdown-number {
				font-size: 200px;
				color: #ff0000;
				font-weight: bold;
				text-shadow: 0 0 20px #fff, 0 0 30px #ff0000;
				animation: pulseCountdown 1s infinite;
			}
		}

		/* 增强边缘光效 */
		.edge-glow {
			position: absolute;
			top: -30px;
			left: -30px;
			right: -30px;
			bottom: -30px;
			background:
				radial-gradient(circle at 20% 20%,
					rgba(255, 50, 50, 0.6) 0%,
					rgba(255, 20, 20, 0.4) 30%,
					transparent 70%),
				radial-gradient(circle at 80% 20%,
					rgba(255, 50, 50, 0.6) 0%,
					rgba(255, 20, 20, 0.4) 30%,
					transparent 70%),
				radial-gradient(circle at 20% 80%,
					rgba(255, 50, 50, 0.6) 0%,
					rgba(255, 20, 20, 0.4) 30%,
					transparent 70%),
				radial-gradient(circle at 80% 80%,
					rgba(255, 50, 50, 0.6) 0%,
					rgba(255, 20, 20, 0.4) 30%,
					transparent 70%);
			border-radius: 40px;
			z-index: 1;
			animation:
				pulse 3s ease-in-out infinite alternate,
				edgeGlowMove 10s linear infinite;
			filter: blur(15px);
		}

		.edge-light {
			position: absolute;
			top: -20px;
			left: -20px;
			right: -20px;
			bottom: -20px;
			background:
				linear-gradient(45deg,
					rgba(255, 100, 100, 0.3) 0%,
					rgba(255, 200, 100, 0.4) 50%,
					rgba(255, 100, 100, 0.3) 100%);
			border-radius: 30px;
			z-index: 2;
			animation: lightPulse 4s ease-in-out infinite;
			filter: blur(10px);
		}

		/* 增强背景光效 */
		.bg-glow {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 150%;
			height: 150%;
			background:
				radial-gradient(circle,
					rgba(255, 200, 100, 0.4) 0%,
					rgba(255, 150, 50, 0.3) 40%,
					transparent 70%);
			z-index: 0;
			animation:
				glowPulse 4s ease-in-out infinite alternate,
				glowMove 15s linear infinite;
			filter: blur(20px);
		}

		.bg-light {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 120%;
			height: 120%;
			background:
				linear-gradient(45deg,
					rgba(255, 100, 100, 0.2) 0%,
					rgba(255, 200, 100, 0.3) 50%,
					rgba(255, 100, 100, 0.2) 100%);
			z-index: 1;
			animation:
				lightFlow 8s linear infinite;
			filter: blur(15px);
		}

		/* 背景粒子效果 */
		.particles {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;

			.particle {
				position: absolute;
				width: 3px;
				height: 3px;
				background: rgba(255, 255, 255, 0.6);
				border-radius: 50%;
				animation: particleFloat linear infinite;

				@for $i from 1 through 20 {
					&:nth-child(#{$i}) {
						top: random(100) + '%';
						left: random(100) + '%';
						animation-duration: calc(10s + random(20) * 1s);
						animation-delay: random(10) + s;
					}
				}
			}
		}

		.bg {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			margin: auto;
			border-radius: 8rpx;
			background-color: rgba(255, 255, 255, .1);
			overflow: hidden;
			padding: 40rpx;
			width: max-content;
			height: max-content;
			box-shadow:
				0 0 40px 10px rgba(255, 100, 100, 0.3),
				inset 0 0 20px 5px rgba(255, 255, 255, 0.1);
			z-index: 3;
			border: 1px solid rgba(255, 200, 200, 0.3);

			/* 四角装饰增强 */
			.corner-decor {
				position: absolute;
				width: 50px;
				height: 50px;
				background: linear-gradient(45deg, #ff5c5c, #ff9e4f);
				z-index: 4;
				opacity: 0.8;
				animation: cornerPulse 2s ease-in-out infinite alternate;

				&.top-left {
					top: 0;
					left: 0;
					border-radius: 0 0 50px 0;
					box-shadow:
						2px 2px 15px rgba(255, 100, 100, 0.7),
						inset 0 0 10px rgba(255, 200, 200, 0.5);
				}

				&.top-right {
					top: 0;
					right: 0;
					border-radius: 0 0 0 50px;
					box-shadow:
						-2px 2px 15px rgba(255, 100, 100, 0.7),
						inset 0 0 10px rgba(255, 200, 200, 0.5);
				}

				&.bottom-left {
					bottom: 0;
					left: 0;
					border-radius: 0 50px 0 0;
					box-shadow:
						2px -2px 15px rgba(255, 100, 100, 0.7),
						inset 0 0 10px rgba(255, 200, 200, 0.5);
				}

				&.bottom-right {
					bottom: 0;
					right: 0;
					border-radius: 50px 0 0 0;
					box-shadow:
						-2px -2px 15px rgba(255, 100, 100, 0.7),
						inset 0 0 10px rgba(255, 200, 200, 0.5);
				}
			}

			.ok {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
				background-color: rgba(0, 0, 0, .7);
				padding-top: 500rpx;
				display: flex;
				justify-content: center;
				z-index: 10;
				overflow: hidden;

				/* 金色粒子背景 */
				.gold-particles {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;

					.gold-particle {
						position: absolute;
						width: 5px;
						height: 5px;
						background: radial-gradient(circle, gold 0%, #ffcc00 100%);
						border-radius: 50%;
						animation: goldParticle linear infinite;

						@for $i from 1 through 50 {
							&:nth-child(#{$i}) {
								top: random(100) + '%';
								left: random(100) + '%';
								animation-duration: calc(5s + random(10) * 1s);
								animation-delay: random(5) + s;
								transform: scale(random() + 0.5);
							}
						}
					}
				}

				/* 光晕效果 */
				.halo {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					width: 200%;
					height: 200%;
					background: radial-gradient(circle,
							rgba(255, 255, 255, 0.8) 0%,
							rgba(255, 255, 255, 0) 70%);
					animation: haloPulse 3s ease-in-out infinite;
					z-index: 1;
				}

				/* 彩纸效果增强 */
				.confetti {
					position: absolute;
					width: 15px;
					height: 15px;
					opacity: 0.9;
					animation:
						confettiFall linear infinite,
						confettiRotate linear infinite;
					z-index: 2;

					@for $i from 1 through 50 {
						&:nth-child(#{$i}) {
							$hue: random(360);
							background: linear-gradient(45deg,
									hsl($hue, 100%, 50%),
									hsl(($hue + 60) % 360, 100%, 50%));
							animation-duration: calc(3s + (random() * 3s));
							animation-delay: calc(random() * 0.5s);
							top: -30px;
							left: calc(random() * 100%);
							transform: rotate(random(360) + deg);
						}
					}
				}

				.bg-image {
					width: 1500rpx;
					position: relative;
					z-index: 3;

					.img {
						width: 100%;
						display: block;
						filter:
							drop-shadow(0 0 25px rgba(255, 200, 0, 0.9)) drop-shadow(0 0 40px rgba(255, 100, 0, 0.7));
						animation:
							okPulse 2s ease-in-out infinite,
							okFloat 4s ease-in-out infinite;
					}
				}

				.content {
					width: 350rpx;
					height: 350rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					box-sizing: border-box;
					border-radius: 25rpx;
					box-shadow:
						0 0 30px 15px rgba(255, 200, 0, 0.7),
						inset 0 0 20px 5px rgba(255, 255, 255, 0.5);
					position: absolute;
					left: 0;
					right: 0;
					top: 375px;
					margin: auto;
					border: 3px solid gold;
					z-index: 4;
					overflow: hidden;
					transform-style: preserve-3d;
					perspective: 1000px;
					animation: contentFloat 3s ease-in-out infinite;

					/* 多重光效 */
					.prize-glow {
						position: absolute;
						top: -50%;
						left: -50%;
						width: 200%;
						height: 200%;
						background: radial-gradient(circle,
								rgba(255, 255, 255, 0.9) 0%,
								rgba(255, 255, 255, 0.3) 50%,
								rgba(255, 255, 255, 0) 70%);
						animation:
							prizeGlow 2s linear infinite,
							prizeGlowPulse 3s ease-in-out infinite;
						filter: blur(10px);
						z-index: 1;
					}

					.prize-light {
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						background: linear-gradient(45deg,
								rgba(255, 255, 255, 0) 0%,
								rgba(255, 255, 255, 0.4) 50%,
								rgba(255, 255, 255, 0) 100%);
						animation: prizeLight 4s linear infinite;
						z-index: 2;
					}

					.prize-sparkle {
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						background:
							radial-gradient(circle at 20% 30%,
								rgba(255, 255, 255, 0.8) 0%,
								transparent 20%),
							radial-gradient(circle at 80% 70%,
								rgba(255, 255, 255, 0.8) 0%,
								transparent 20%);
						animation: sparklePulse 2s ease-in-out infinite alternate;
						z-index: 3;
					}

					.image {
						width: 90%;
						height: 90%;
						overflow: hidden;
						border-radius: 15px;
						box-shadow:
							0 0 30px 10px rgba(0, 0, 0, 0.5),
							inset 0 0 15px 5px rgba(255, 255, 255, 0.3);
						position: relative;
						z-index: 4;
						transform: translateZ(30px);

						.img {
							display: block;
							width: 100%;
							height: 100%;
							transform: scale(1.05);
							transition: transform 0.5s ease;
						}
					}

					.title {
						position: absolute;
						bottom: 0;
						left: 0;
						right: 0;
						width: 90%;
						margin: auto;
						bottom: 5%;
						border-radius: 0 0 15px 15px;
						background: linear-gradient(to right,
								rgba(0, 0, 0, 0.8),
								rgba(0, 0, 0, 0.6));
						padding: 12px;
						box-sizing: border-box;
						white-space: nowrap;
						font-size: 24px;
						overflow: hidden;
						z-index: 5;
						text-shadow:
							0 0 10px rgba(255, 200, 0, 0.8),
							0 0 5px rgba(0, 0, 0, 0.8);
						font-weight: bold;
						border-top: 2px solid gold;
						transform: translateZ(20px);

						.show-text {
							text-align: center;
							overflow: hidden;
							text-overflow: ellipsis;
							width: 100%;
							color: #fff;
						}
					}

					/* 获奖标签 */
					.winner-badge {
						position: absolute;
						top: -15px;
						right: -15px;
						background: linear-gradient(45deg, #ff5c5c, #ff9e4f);
						color: #fff;
						padding: 5px 15px;
						border-radius: 20px;
						font-size: 16px;
						font-weight: bold;
						text-transform: uppercase;
						box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
						z-index: 6;
						transform: rotate(15deg);
						animation: badgePulse 1.5s ease-in-out infinite;
					}
				}
			}

			.box {
				width: calc(#{$item-width} * 7 + #{$item-spacing} * 6);
				height: calc(#{$item-height} * 6 + #{$item-spacing} * 5);
				position: relative;
			}
		}

		.item {
			width: $item-width;
			height: $item-height;
			flex-shrink: 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;
			border-radius: 8rpx;
			box-shadow: 0 0 16rpx 2rpx rgba(0, 0, 0, 0.2),
				inset 0 0 8rpx 2rpx rgba(255, 255, 255, 0.1);
			border: 2px solid rgba(255, 255, 255, 0.3);
			transition: all 0.1s cubic-bezier(0.25, 0.8, 0.25, 1);
			position: relative;
			overflow: hidden;

			&:hover {
				transform: translateY(-5px) scale(1.05);
				box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
			}

			&.active {
				transform: scale(1.3) !important;
				background: linear-gradient(45deg, #ff0000, #ff6600) !important;
				color: #fff !important;
				box-shadow:
					0 0 40px 15px rgba(255, 50, 50, 0.8),
					0 0 60px 30px rgba(255, 200, 0, 0.6) !important;
				z-index: 10 !important;
				border: 3px solid gold !important;
				animation:
					activePulse 0.5s ease-in-out infinite alternate,
					activeShine 2s linear infinite !important;

				.item-glow {
					background: radial-gradient(circle,
							rgba(255, 255, 255, 0.9) 0%,
							rgba(255, 255, 255, 0.7) 50%,
							rgba(255, 255, 255, 0) 70%) !important;
					animation:
						itemGlow 0.5s linear infinite,
						glowExpand 1s ease-in-out infinite alternate !important;
				}

				.image {
					transform: scale(1.1) !important;
					box-shadow:
						0 0 30px 10px rgba(255, 200, 0, 0.7),
						inset 0 0 20px 5px rgba(255, 255, 255, 0.5) !important;
				}

				.title {
					background: linear-gradient(to right,
							rgba(0, 0, 0, 0.9),
							rgba(100, 0, 0, 0.7)) !important;
					font-size: 16px !important;
					text-shadow:
						0 0 10px rgba(255, 255, 255, 0.8),
						0 0 5px rgba(255, 0, 0, 0.8) !important;
				}
			}

			&.pulse {
				animation: pulseItem 0.5s ease-in-out infinite alternate;
			}

			.item-glow {
				position: absolute;
				top: -50%;
				left: -50%;
				width: 200%;
				height: 200%;
				background: radial-gradient(circle,
						rgba(255, 255, 255, 0.8) 0%,
						rgba(255, 255, 255, 0) 70%);
				animation: itemGlow 1s linear infinite;
				z-index: 1;
			}

			.image {
				width: 90%;
				height: 90%;
				overflow: hidden;
				box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.3);
				border-radius: 10px;
				position: relative;
				z-index: 2;
				transition: all 0.1s ease;

				.img {
					display: block;
					width: 100%;
					height: 100%;
					transition: transform 0.3s ease;
				}
			}

			.title {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
				overflow: hidden;
				width: 90%;
				border-radius: 0 0 10px 10px;
				background: linear-gradient(to right,
						rgba(0, 0, 0, 0.7),
						rgba(0, 0, 0, 0.5));
				bottom: 5%;
				padding: 8px;
				box-sizing: border-box;
				z-index: 3;
				border-top: 1px solid rgba(255, 255, 255, 0.1);

				.show-text {
					width: 100%;
					font-size: 14px;
					white-space: nowrap;
					overflow: hidden;
					text-align: center;
					text-overflow: ellipsis;
					color: #fff;
					text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
					font-weight: bold;
				}
			}
		}

		.top {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: $item-height;
			display: flex;
			align-items: center;
			justify-content: center;

			.item {
				margin-right: $item-spacing;
				animation: floatTop 3s ease-in-out infinite;
				animation-delay: calc(var(--i) * 0.1s);

				&:last-of-type {
					margin-right: 0;
				}
			}
		}

		.right {
			position: absolute;
			right: 0;
			top: $item-height;
			bottom: $item-height;
			width: $item-width;
			display: flex;
			flex-direction: column;
			padding-top: $item-spacing;
			align-items: center;

			.item {
				margin-bottom: $item-spacing;
				animation: floatRight 3s ease-in-out infinite;
				animation-delay: calc(var(--i) * 0.1s);

				&:last-of-type {
					margin-bottom: 0;
				}
			}
		}

		.bottom {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			height: $item-height;
			display: flex;
			align-items: center;
			flex-direction: row-reverse;
			justify-content: center;

			.item {
				margin-left: $item-spacing;
				animation: floatBottom 3s ease-in-out infinite;
				animation-delay: calc(var(--i) * 0.1s);

				&:last-of-type {
					margin-left: 0;
				}
			}
		}

		.left {
			position: absolute;
			top: $item-height;
			bottom: $item-height;
			left: 0;
			width: $item-width;
			display: flex;
			flex-direction: column-reverse;
			padding-bottom: $item-spacing;
			align-items: center;

			.item {
				margin-top: $item-spacing;
				animation: floatLeft 3s ease-in-out infinite;
				animation-delay: calc(var(--i) * 0.1s);

				&:last-of-type {
					margin-top: 0;
				}
			}
		}
	}

	/* 新增动画效果 */
	@keyframes edgeGlowMove {
		0% {
			background-position: 0% 0%, 100% 0%, 0% 100%, 100% 100%;
		}

		100% {
			background-position: 100% 100%, 0% 100%, 100% 0%, 0% 0%;
		}
	}

	@keyframes glowMove {
		0% {
			background-position: 0% 0%;
		}

		100% {
			background-position: 100% 100%;
		}
	}

	@keyframes lightFlow {
		0% {
			transform: translate(-50%, -50%) rotate(0deg);
		}

		100% {
			transform: translate(-50%, -50%) rotate(360deg);
		}
	}

	@keyframes particleFloat {
		0% {
			transform: translateY(0) translateX(0);
			opacity: 0;
		}

		10% {
			opacity: 1;
		}

		90% {
			opacity: 1;
		}

		100% {
			transform: translateY(-100vh) translateX(random(100) - 50 + px);
			opacity: 0;
		}
	}

	@keyframes goldParticle {
		0% {
			transform: translateY(0) translateX(0) scale(1);
			opacity: 0;
		}

		20% {
			opacity: 1;
		}

		80% {
			opacity: 1;
		}

		100% {
			transform: translateY(-100px) translateX(random(100) - 50 + px) scale(0.5);
			opacity: 0;
		}
	}

	@keyframes haloPulse {

		0%,
		100% {
			opacity: 0.3;
			transform: translate(-50%, -50%) scale(1);
		}

		50% {
			opacity: 0.6;
			transform: translate(-50%, -50%) scale(1.2);
		}
	}

	@keyframes okPulse {

		0%,
		100% {
			transform: scale(1);
			filter:
				drop-shadow(0 0 25px rgba(255, 200, 0, 0.9)) drop-shadow(0 0 40px rgba(255, 100, 0, 0.7));
		}

		50% {
			transform: scale(1.05);
			filter:
				drop-shadow(0 0 30px rgba(255, 200, 0, 1)) drop-shadow(0 0 50px rgba(255, 100, 0, 0.9));
		}
	}

	@keyframes okFloat {

		0%,
		100% {
			transform: translateY(0);
		}

		50% {
			transform: translateY(-10px);
		}
	}

	@keyframes contentFloat {

		0%,
		100% {
			transform: translateY(0) rotateX(5deg) rotateY(5deg);
		}

		50% {
			transform: translateY(-15px) rotateX(-5deg) rotateY(-5deg);
		}
	}

	@keyframes prizeGlowPulse {

		0%,
		100% {
			opacity: 0.8;
		}

		50% {
			opacity: 0.4;
		}
	}

	@keyframes prizeLight {
		0% {
			transform: translateX(-100%);
		}

		100% {
			transform: translateX(100%);
		}
	}

	@keyframes sparklePulse {
		0% {
			opacity: 0.3;
		}

		100% {
			opacity: 0.8;
		}
	}

	@keyframes confettiRotate {
		0% {
			transform: translateY(-100px) rotate(0deg);
		}

		100% {
			transform: translateY(1000px) rotate(720deg);
		}
	}

	@keyframes cornerPulse {
		0% {
			opacity: 0.6;
		}

		100% {
			opacity: 0.9;
		}
	}

	@keyframes badgePulse {

		0%,
		100% {
			transform: rotate(15deg) scale(1);
		}

		50% {
			transform: rotate(15deg) scale(1.1);
		}
	}

	// 动画定义
	@keyframes pulse {
		0% {
			opacity: 0.3;
			transform: scale(0.98);
		}

		100% {
			opacity: 0.6;
			transform: scale(1.02);
		}
	}

	@keyframes lightPulse {

		0%,
		100% {
			opacity: 0.3;
		}

		50% {
			opacity: 0.6;
		}
	}

	@keyframes glowPulse {
		0% {
			opacity: 0.3;
			transform: translate(-50%, -50%) scale(0.9);
		}

		100% {
			opacity: 0.6;
			transform: translate(-50%, -50%) scale(1.1);
		}
	}

	@keyframes pulseItem {
		0% {
			box-shadow: 0 0 15px 5px rgba(255, 0, 0, 0.3);
		}

		100% {
			box-shadow: 0 0 30px 15px rgba(255, 0, 0, 0.7);
		}
	}

	@keyframes itemGlow {
		0% {
			transform: rotate(0deg) scale(1);
		}

		100% {
			transform: rotate(360deg) scale(1.2);
		}
	}

	@keyframes prizeGlow {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	@keyframes floatTop {

		0%,
		100% {
			transform: translateY(0);
		}

		50% {
			transform: translateY(-10px);
		}
	}

	@keyframes floatRight {

		0%,
		100% {
			transform: translateX(0);
		}

		50% {
			transform: translateX(10px);
		}
	}

	@keyframes floatBottom {

		0%,
		100% {
			transform: translateY(0);
		}

		50% {
			transform: translateY(10px);
		}
	}

	@keyframes floatLeft {

		0%,
		100% {
			transform: translateX(0);
		}

		50% {
			transform: translateX(-10px);
		}
	}

	@keyframes confettiFall {
		0% {
			transform: translateY(-100px) rotate(0deg);
			opacity: 1;
		}

		100% {
			transform: translateY(1000px) rotate(360deg);
			opacity: 0;
		}
	}

	// 为每个方向的item设置不同的动画延迟
	@for $i from 1 through 22 {
		.top .item:nth-child(#{$i}) {
			--i: #{$i};
		}

		.right .item:nth-child(#{$i}) {
			--i: #{$i + 7};
		}

		.bottom .item:nth-child(#{$i}) {
			--i: #{$i + 11};
		}

		.left .item:nth-child(#{$i}) {
			--i: #{$i + 18};
		}
	}

	/* 新增动画效果 */
	@keyframes activePulse {
		0% {
			transform: scale(1.25) rotate(12deg);
			box-shadow:
				0 0 35px 12px rgba(255, 50, 50, 0.7),
				0 0 50px 25px rgba(255, 200, 0, 0.5);
		}

		100% {
			transform: scale(1.35) rotate(18deg);
			box-shadow:
				0 0 45px 18px rgba(255, 50, 50, 0.9),
				0 0 70px 35px rgba(255, 200, 0, 0.7);
		}
	}

	@keyframes activeShine {
		0% {
			filter: brightness(1);
		}

		50% {
			filter: brightness(1.3);
		}

		100% {
			filter: brightness(1);
		}
	}

	@keyframes glowExpand {
		0% {
			transform: scale(1);
			opacity: 0.8;
		}

		100% {
			transform: scale(1.5);
			opacity: 0.3;
		}
	}

	@keyframes pulseCountdown {
		0% {
			transform: scale(1);
			opacity: 1;
		}

		50% {
			transform: scale(1.2);
			opacity: 0.7;
		}

		100% {
			transform: scale(1);
			opacity: 1;
		}
	}
</style>